<template>
  <div class="user-list-container">
    <el-card>
        <div slot="header" class="clearfix">
            <span>博客类型列表</span>
            <el-button type="primary" @click="handleAdd" class="add-btn">
            <i class="el-icon-plus"></i> 新增类型
            </el-button>
            <el-button type="primary" @click="handleRefresh" class="refresh-btn">
            <i class="el-icon-refresh"></i> 刷新
            </el-button>
        </div>
        <!-- 用户表格 -->
        <el-table v-loading="loading" :data="userList" style="width: 100%;">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column label="ID" prop="_id" width="360" />
            <el-table-column label="类型名称" prop="name" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <TypesAdd ref="TypesAdd" @initTable="handleRefresh" />
    <TypesEdit ref="TypesEdit" @initTable="handleRefresh" />
  </div>
</template>

<script>
import { blogTypesList,blogTypesDel } from '@/api/api'
import TypesAdd from './TypesAdd.vue'
import TypesEdit from './TypesEdit.vue'
export default {
    name: 'UserList',
    components: {
        TypesAdd,
        TypesEdit
    },
    data () {
        return {
            userList: [],
            userListData: [],
            searchForm: {
                name: ''
            },
            loading: false
        }
    },
    mounted () {
        this.getUsers()
    },
    methods: {
        handleRefresh () {
            this.getUsers()
        },
        getUsers() {
            this.loading = true
            blogTypesList().then(res => {
                if (res.errCode == 0) {
                    this.userList = res.data || []
                    this.userList.forEach(item => {
                        item.createdAt = this.$dateBtn(item.createdAt)
                        item.updatedAt = this.$dateBtn(item.updatedAt)
                    })
                } else {
                    this.$message.error(res.errMsg)
                }
                // this.pagination.total = res.page.total || 0
                this.loading = false
            }).catch(error => {
                console.error('获取用户列表失败:', error)
                this.loading = false
                this.$message.error('获取用户列表失败，请稍后重试')
            })
        },
        handleAdd () {
            console.log("测试")
            this.$refs.TypesAdd.openDialog();
        },
        handleEdit (row) {
            this.$refs.TypesEdit.openDialog(row);
        },
        handleDelete (row) {
            this.$confirm('确定删除该博客类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                blogTypesDel({_id: row._id}).then(res => {
                    if (res.errCode == 0) {
                        this.$message.success('删除成功');
                        this.handleRefresh();
                    } else {
                        this.$message.error(res.errMsg);
                    }
                }).catch(error => {
                    console.error('删除用户失败:', error);
                    this.$message.error('删除用户失败，请稍后重试');
                });
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.user-list-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.el-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.add-btn {
  float: right;
}

.search-filter {
  margin: 15px 0;
  padding: 10px;
  background: #fafafa;
  border-radius: 6px;
}

.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  flex: 1;
  overflow: auto;
}
</style>
